<!DOCTYPE html>
<html>

<head>
  <script src="./konva.min.js"></script>
  <meta charset="utf-8" />
  <title>当前点击 事件</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    var width = window.innerWidth
    var height = window.innerHeight

    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height,
    })


    var layer = new Konva.Layer()
    stage.add(layer)
    var circle = new Konva.Circle({
      x: stage.width() / 2,
      y: stage.height() / 2,
      fill: 'blue',
      radius: 30,
      draggable: true
    })
    layer.add(circle)

    var tr = new Konva.Transformer({
      anchorStroke: '#0000ff',
      anchorFill: 'yellow',
      anchorSize: 20,
      borderStroke: '#ff0000',
      borderDash: [5, 5]
    })
    layer.add(tr)
    tr.attachTo(circle)

    layer.draw()

    stage.on('click', function (e) {
      // e.target is a clicked Konva.Shape or current stage if you clicked on empty space
      console.log('点击', e.target)
      console.log(
        '通常点击' + JSON.stringify(stage.getPointerPosition())
      )
    })
  </script>
</body>

</html>